<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      /* 基本样式 */
      body {
        font-family: Arial, sans-serif;
      }

     .form-inline {
        display: inline-block;
      }

      table {
        width: 100%;
        border-collapse: collapse;
      }

      th,
      td {
        border: 1px solid black;
        padding: 8px;
        text-align: left;
      }

      th {
        background-color: #f2f2f2;
      }

      table th:nth-of-type(3),
      table td:nth-of-type(3) {
        width: 6%;
      }

      table th:nth-of-type(11),
      table td:nth-of-type(11) {
        width: 6%;
      }
      .data-value-input{
        width:50px;
      }
      .data-value-input::placeholder {
  text-decoration: line-through;
  /* 如果需要设置删除线的颜色，可以添加如下属性 */
  /* text-decoration-color: red; */
}

    
      @media print {
        /* 设置较小的页面边距 */
        @page {
          margin: 0.5cm;
        }

        /* 保持内容的显示，不隐藏header, footer, nav, form */
        header,
        footer,
        nav,
        form {
          display: block;
        }

        /* 调整表格和单元格的字体大小 */
        table,
        th,
        td {
          font-size: smaller; /* 减小字体大小 */
        }

        /* 其他打印样式规则 */
        /* 隐藏不需要打印的部分 */
        header,
        footer,
        nav,
        form {
          display: none;
        }
      }
    </style>
    <title>打印数据</title>
  </head>

  <!-- <body data-current-url="{{ request.path | safe }}"> -->
  <body>
    <!-- 导航 -->
    <header>
      <nav>
        <!-- <button id="printButton">点击我打印</button> -->
        <button id="backButton">返回首页</button>
        <form method="post" action="{% url 'filter_by_date' %}">
          {% csrf_token %}
          <span>检验日期:</span>
          <input type="date" id="date" name="date" value="{{ selected_date }}"/>
          <input type="submit" value="提交" />
        </form>
        <form class="form-inline" method="post" action="{% url 'filter_by_batch' %}">
          {% csrf_token %}
          <label for="batch">批号:</label>
          <input type="text" id="batch" name="批号" placeholder="请输入批号" />      
          <input type="submit" value="提交">
        </form>
        <!-- <div id="paginationInfo">
          当前第 <span id="currentPage">{{ datas.number }}</span> 页 / 共 <span id="totalPages">{{ datas.paginator.num_pages }}</span> 页
        </div> -->
      </nav>
    </header>
    <div id="new-layout-container">
        <table>
            <thead>
                <tr>
                <th><label>全选</label><input type="checkbox" id="selectAllCheckbox"></th>
                <th>检验单号</th>
                <th>检验日期</th>
                <th>存货编码</th>
                <th>存货名称</th>
                <th>规格型号</th>
                <th>品牌</th>
                <th>供应商编码</th>
                <th>供应商名称</th>
                <th>批号</th>
                <th>生产日期</th>
                <th>合格数量</th>
                <th>不良数量</th>
                </tr>
            </thead>
            <tbody>
                {% for data in datas %}
                <tr>
                <td id="indexnodisplay">
                    <input
                    type="checkbox"
                    name="selected_rows"
                    value="{{ data.检验单号 }}"
                    />
                </td>
                <td>{{data.检验单号}}</td>
                <td>{{ data.检验日期|date:"Y-m-d" }}</td>
                <td>{{data.存货编码}}</td>
                <td>{{data.存货名称}}</td>
                <td>{{data.规格型号}}</td>
                <td>{{data.品牌}}</td>
                <td>{{data.供应商编码}}</td>
                <td>{{data.供应商名称}}</td>
                <td>{{data.批号}}</td>
                <td>{{data.生产日期|date:"Y-m-d"}}</td>
                <td>{{data.合格数量}}</td>
                <td>{{data.不良数量}}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <div id="data-container"></div>
    <!-- 尾部 -->
    <footer>
      <button id="confirmButton">确认</button>
      <div id="pagination">
        <button id="firstPage">首页</button>
        <button id="prevPage">上一页</button>
        <span id="currentPage">{{ datas.number }}</span>
        <button id="nextPage">下一页</button>
        <button id="lastPage">尾页</button>
      </div>
      <div id="paginationInfo">
        当前第 <span id="currentPage">{{ datas.number }}</span> 页 / 共 <span id="totalPages">{{ datas.paginator.num_pages }}</span> 页
      </div>
    </footer>
    <script>
      // 等待DOM加载完毕
      document.addEventListener("DOMContentLoaded", function () {
        var index = "http://192.168.12.2:9000/";
        // // 分页逻辑
        var currentPage = 1;
        var numPerPage = 90; // 每页显示的条目数
        // 获取id为'totalPages'的元素
        var totalPagesElement = document.getElementById('totalPages');
        // 获取该元素的文本内容，即页数
        var totalPages = parseInt(totalPagesElement.textContent);

        // 从URL获取当前页码
        var params = new URLSearchParams(window.location.search);
        var pageFromUrl = parseInt(params.get('page')) || 1;
        currentPage = pageFromUrl;

        var pre = document.getElementById("prevPage");
        pre.addEventListener("click", function () {
          // alert("pre");
          if(currentPage>1){
            currentPage = currentPage-1;
            window.location.href = index + '?page=' + currentPage;
          }
        });

        var next = document.getElementById("nextPage");
        next.addEventListener("click", function () {
          // alert("next");
          if(currentPage<totalPages){
            currentPage = currentPage+1;
            window.location.href = index + '?page=' + currentPage;
          }
        });

        var first = document.getElementById("firstPage");
        first.addEventListener("click", function () {
            window.location.href = index + '?page=1';
        });

        var last = document.getElementById("lastPage");
        last.addEventListener("click", function () {
            window.location.href = index + '?page=' + totalPages;
        });

        // // 使用分页器信息更新分页控件
        // document.getElementById('pagination').setAttribute('data-total-pages', datas.paginator.num_pages);
        // document.getElementById('currentPage').textContent = datas.number;


        var currentUrl = window.location.href;
        // var isMainPage = currentUrl === 'http://192.168.12.2:9000/';
         // 定义需要隐藏分页信息的 URL 列表
        var hidePaginationUrls = [
          "http://192.168.12.2:9000/filter_by_date/",
          "http://192.168.12.2:9000/filter-by-batch/"
        ];

        var hideindexUrls = [
          "http://192.168.12.2:9000/"
        ];

        // 检查当前 URL 是否在需要隐藏分页信息的列表中
        if (hidePaginationUrls.includes(currentUrl)) {
          // 获取分页信息的 DOM 元素
          var paginationInfo = document.getElementById('paginationInfo');
          var pagination = document.getElementById('pagination');

          // 如果这些元素存在，使用 CSS 来隐藏它们
          if (paginationInfo) {
            paginationInfo.style.display = 'none';
          }
          if (pagination) {
            pagination.style.display = 'none';
          }
        }

        // 检查当前 URL 是否在需要隐藏分页信息的列表中
        if (hideindexUrls == currentUrl) {
          // 获取分页信息的 DOM 元素
          var backButton = document.getElementById('backButton');

          // 如果这些元素存在，使用 CSS 来隐藏它们
          if (backButton) {
            backButton.style.display = 'none';
          }
        }
        
        // // 获取打印按钮元素
        // var printButton = document.getElementById("printButton");

        // // 为打印按钮添加点击事件监听器
        // printButton.addEventListener("click", function () {
        //   // 直接调用window.print()方法来触发打印对话框
        //   window.print();
        // });

        // 获取返回按钮元素
        var backButton = document.getElementById("backButton");

        // 获取所有表单元素
        var forms = document.querySelectorAll("form");

        // 为返回按钮添加点击事件监听器
        backButton.addEventListener("click", function () {

          // 跳转到首页
          window.location.href = "http://192.168.12.2:9000/";
        //   window.location.href = "http://127.0.0.1:8000/";
        });

        // 这里创建一个空数组来模拟这个数据结构

        // 新添加的代码：在每个tr的第12个td添加input元素
        var table = document.querySelector('table');
        var rows = table.getElementsByTagName('tr');

        for (var i = 1; i < rows.length; i++) { // 从1开始，跳过表头
          var cell = rows[i].getElementsByTagName('td')[11]; // 获取第12个td
          if (cell) {
              // 创建一个新的input元素
              var inputField = document.createElement('input');
              inputField.type = 'text';
              inputField.className = 'data-value-input';
              inputField.placeholder = cell.textContent;
              inputField.value = cell.textContent; // 设置input的初始值为单元格的当前文本
              cell.textContent = ''; // 清空原td内容
              // 将input元素添加到单元格中，紧随原有内容之后
              
              cell.appendChild(inputField);
                }
              }

        // 获取全选复选框
        var selectAllCheckbox = document.getElementById('selectAllCheckbox');
        // 获取所有子复选框
        var checkboxes = document.querySelectorAll('input[name="selected_rows"]');
    
        // 为全选复选框添加点击事件监听器
        selectAllCheckbox.addEventListener('change', function() {
          // 同步全选复选框的状态到所有子复选框
          checkboxes.forEach(function(checkbox) {
            checkbox.checked = this.checked;
          }, selectAllCheckbox);
        });
    
        // 为每个子复选框添加点击事件监听器
        checkboxes.forEach(function(checkbox) {
          checkbox.addEventListener('change', function() {
            // 如果存在未选中的子复选框，则取消全选复选框的选中状态
            if (!this.checked) {
              selectAllCheckbox.checked = false;
            }
          });
        });
    
        // 获取确认按钮元素
        var confirmButton = document.getElementById("confirmButton");
    
        // 为确认按钮添加点击事件监听器
        confirmButton.addEventListener("click", function () {
          // 创建一个数组来存储选中的数据对象
          var selectedDataArray = [];
          // // 获取所有复选框
          // var checkboxes = document.querySelectorAll('input[name="selected_rows"]');
          // 获取所有数据行
          var rows = document.querySelectorAll("tbody tr");
    
          checkboxes.forEach(function (checkbox, index) {
            if (checkbox.checked) {
      //         // 根据checkbox的索引找到对应的数据行
      // var index = Array.prototype.indexOf.call(checkboxes, checkbox);
              // 根据检验单号找到对应的数据行
              var 检验单号 = checkbox.value;
              var dataRow = rows[index]; // 直接使用当前索引获取对应的行
              // console.log("有数据");


              // 获取对应的input元素的值，这可能是用户修改后的合格数量
              var inputField = dataRow.cells[11].querySelector('.data-value-input');
              var modifiedQualifiedQuantity = inputField ? inputField.value : dataRow.cells[11].textContent;
      
              if (dataRow) {
                // 构建数据对象
                // console.log("有data")
                var dataObj = {
                  // 检验单号: 检验单号,
                  存货编码: dataRow.cells[3].textContent,
                  存货名称: dataRow.cells[4].textContent,
                  规格型号: dataRow.cells[5].textContent,
                  品牌: dataRow.cells[6].textContent,
                  供应商编码: dataRow.cells[7].textContent,
                  供应商名称: dataRow.cells[8].textContent,
                  批号: dataRow.cells[9].textContent,
                  生产日期: dataRow.cells[10].textContent,
                //   合格数量: parseFloat(dataRow.cells[11].textContent).toFixed(0), // 去除小数点和后面的零
                //   合格数量: dataRow.cells[11].textContent,
                  // 合格数量: Math.round(parseFloat(dataRow.cells[11].textContent)).toString(),
                  合格数量: modifiedQualifiedQuantity, // 使用修改后的合格数量
                  // 不良数量: dataRow.cells[12].textContent,
                };
                // console.log(dataObj);

                // 将数据对象添加到数组中
                selectedDataArray.push(dataObj);
                // console.log(selectedDataArray);
              }
            }
          });
    
          // 如果没有选中任何行，则不执行任何操作或给出提示
          if (selectedDataArray.length === 0) {
            alert("请选择至少一行数据。");
            return;
          }
          
          // 发送数据到服务器的代码
          fetch("{% url 'selected_data' %}", {
              method: 'POST',
              headers: {
                  'X-CSRFToken': '{{ csrf_token }}',
                  'Content-Type': 'application/json',
              },
              body: JSON.stringify(selectedDataArray),
          })
          .then(response => response.json())
          .then(data => {
              if (data.success) {
                  // 假设selectedDataArray是服务器返回的数据数组
                  var dataString = JSON.stringify(data.data);
                  // 替换所有的百分号
                  var safeDataString = dataString.replace(/%/g, '#');
                  // 发送数据时使用安全的字符串
                  window.location.href = `{% url 'show_selected_data' %}?data=${encodeURIComponent(safeDataString)}`;
              } else {
                  alert("无法获取选中的数据，请稍后再试。");
              }
          })
          .catch(error => {
              console.error('Error:', error);
              alert("请求失败，请稍后再试。");
          });

      });
    });
    </script>
        
  </body>
</html>
